<script setup lang="ts">
import PlayListHeader from '@/components/playlist/PlayListHeader.vue'
import PlayListTabB from '@/components/playlist/PlayListTabB.vue'
import { onBeforeMount, onMounted, watch } from 'vue'
import { useAudioPlayerStore, useRecentlyStore } from '@/stores'
import { useRoute } from 'vue-router'
import { handleWheel } from '@/composables/useWheelEvent'


const recentlyStore = useRecentlyStore()


onBeforeMount(()=>{
  recentlyStore.getPlayListInfo()
})


const route = useRoute()
const audioPlayer= useAudioPlayerStore()

onMounted(()=>{
  const songId = route.query.play? route.query.play :""
  if(songId !== "")
  {

    const songs = recentlyStore.list.filter(item => item.id === songId)
    if(songs.length > 0 && songs[0] as song_info)
    {
      console.log("set music")
      audioPlayer.setPlayingSong(songs[0],true)
    }

  }
})

watch(()=>route.query.play,(newPlay)=>{
  const songId = newPlay
  if(songId !== "")
  {
    const songs = recentlyStore.list.filter(item=> item.id === songId)
    if(songs.length > 0)
    {
      audioPlayer.setPlayingSong(songs[0],true)
    }

  }
})


</script>

<template>
  <div class="wrapper" @wheel.prevent="handleWheel($event,58)">
    <PlayListHeader :title="recentlyStore.playListName" :songs="recentlyStore.list" :logo="recentlyStore.playListImg" ></PlayListHeader>
    <PlayListTabB :songs="recentlyStore.list"></PlayListTabB>
  </div>

</template>

<style lang="scss" scoped>
.wrapper{
  position: relative;
}
</style>